<template>
  <div class="common-layout">
    <div class="main-content" :class="{ 'nav-expanded': isNavExpanded }">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <div class="footer-tab-bar" :class="{ 'expanded': isNavExpanded }">
      <div class="tab-row">
        <div class="tab-item" :class="{ 'is-active': route.path === '/home' }" @click="goToPage('/home')">
          <el-badge :value="unreadCount.home" :hidden="!unreadCount.home">
            <el-icon>
              <House />
            </el-icon>
          </el-badge>
          <span>首页</span>
        </div>
        <div class="tab-item" :class="{ 'is-active': route.path === '/inquiry' }" @click="goToPage('/inquiry')">
          <el-badge :value="unreadCount.inquiry" :hidden="!unreadCount.inquiry">
            <el-icon>
              <ChatDotRound />
            </el-icon>
          </el-badge>
          <span>问诊</span>
        </div>
        <div class="tab-item" :class="{ 'is-active': route.path === '/profile-skin' }"
          @click="goToPage('/profile-skin')">
          <el-badge :value="unreadCount.profile" :hidden="!unreadCount.profile">
            <el-icon>
              <User />
            </el-icon>
          </el-badge>
          <span>皮肤档案</span>
        </div>
        <div class="tab-item" :class="{ 'is-active': route.path === '/profile' }" @click="goToPage('/profile')">
          <el-badge :value="unreadCount.profile" :hidden="!unreadCount.profile">
            <el-icon>
              <User />
            </el-icon>
          </el-badge>
          <span>我的</span>
        </div>
      </div>

      <!-- 展开/收起按钮 -->
      <!-- <div class="expand-button" @click="toggleNav">
        <el-icon :class="{ 'is-expanded': isNavExpanded }">
          <ArrowUp />
        </el-icon>
      </div> -->
    </div>

    <!-- 退出登录对话框 -->
    <el-dialog v-model="logoutDialogVisible" title="退出登录" width="300px" :show-close="false" center>
      <span>确定要退出登录吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="logoutDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleLogout">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ChatDotRound,
  House,
  User
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../store/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const logoutDialogVisible = ref(false)
// const isNavExpanded = ref(false)

// 模拟未读消息数量
const unreadCount = reactive({
  home: 0,
  inquiry: 2,
  chronic: 1,
  profile: 0
})

const goToPage = (path) => {
  router.push(path)
  // isNavExpanded.value = false
}

// const toggleNav = () => {
//   isNavExpanded.value = !isNavExpanded.value
// }

const handleLogout = () => {
  userStore.clearToken()
  ElMessage.success('退出登录成功')
  router.push('/login')
  logoutDialogVisible.value = false
}
</script>

<style scoped>
.common-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.main-content {
  flex: 1;
  padding-bottom: 50px;
  /* 调整为与底部导航栏高度一致 */
  overflow-x: hidden;
  overflow-y: auto;
  transition: padding-bottom 0.3s ease;
}

.main-content.nav-expanded {
  /* padding-bottom: 120px; */
}

.footer-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
  transition: transform 0.3s ease;
}

.footer-tab-bar.expanded {
  /* transform: translateY(-60px); */
}

.tab-row {
  display: flex;
  height: 50px;
  padding: 5px 0;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
  position: relative;
}

.tab-item.is-active {
  color: #409EFF;
}

.tab-item .el-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.tab-item span {
  font-size: 12px;
}

.quick-actions {
  /* display: flex; */
  /* justify-content: space-around; */
  /* padding: 10px 0; */
  /* background-color: #f8f9fa; */
  /* border-top: 1px solid #eee; */
}

.quick-action-item {
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* padding: 5px 15px; */
  /* cursor: pointer; */
  /* transition: transform 0.2s; */
}

.quick-action-item:active {
  /* transform: scale(0.95); */
}

.quick-action-item .el-icon {
  /* font-size: 24px; */
  /* color: #409EFF; */
  /* margin-bottom: 4px; */
}

.quick-action-item span {
  /* font-size: 12px; */
  /* color: #666; */
}

.expand-button {
  /* position: absolute; */
  /* top: -20px; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /* width: 40px; */
  /* height: 40px; */
  /* background-color: #fff; */
  /* border-radius: 50%; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); */
  /* cursor: pointer; */
  /* transition: transform 0.3s ease; */
}

.expand-button .el-icon.is-expanded {
  /* transform: rotate(180deg); */
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>